技能五輪国際大会ウェブデザイン職種(WorldSkills WebTechnologies)に日本代表で出場します！

戸田駿太

2024.05.17

こんにちは！24卒でクラスメソッドに入社した戸田駿太です。

2024年9月にフランスで行われる技能五輪国際大会ウェブデザイン職種(WorldSkills Web Technologies)に日本代表として出場します！

社内社外問わず、色々な方に知って頂きたいので紹介したいと思います。

技能五輪国際大会(WorldSkills)とは

技能五輪国際大会(以下、WorldSkills)では細かなルールが多くあるので簡単に説明します。

概要

公式ページによると以下のように記載されています。

技能五輪国際大会「WorldSkills Competition」は、参加各国における職業訓練の振興と青年技能者の国際親善を図るため、 2年に1度、世界各国・地域の予選会などを勝ち抜いた選手が一堂に集い、磨き抜かれた技能を競う競技大会です。大会はまた、子供たちにとって優れた技能の見学と体験の場でもあり、職業観教育の絶好の機会となっています。

要するに、若い技術者を鍛え上げるための国際大会といった感じです。

2024リヨン大会の開催地・日程

開催地	フランス・リヨン
競技会場	ユーロエキスポ（Eurexpo ）
開会式	2024年9月10日（火)
競技期間	2024年9月11日（水）～　9月14日（土)
閉会式	2024年9月15日（日)

開会式は9月10日ですが、日本選手団は6日に出国して18日に帰国する予定です。

ウェブデザイン(WebTechnologies)職種

僕が参加する種目はウェブデザイン職種(Web Technologies)です。

公式ページの概要は以下です。

この職種では、スマートフォンやPCで閲覧および操作されるウェブサイトやウェブアプリなどのプログラミングやデザインを行います。HTML、CSS、JavaScript、PHPなど、ウェブにおける基礎的な構築言語に加え、ウェブサーバーの構築やデータベースの設計・管理の知識、変更容易性や構築効率化のためにフレームワークなども活用できる技能が求められる職種です。

日本語名のウェブデザインのデザインは設計の意味で使用されているそうです。

全ての課題が3時間の時間制限があり、設計や構築のスピードがかなり求められます。そんな課題を4日間で7つも行うのには強い精神力が必要です。

WorldSkills出場への想い

出場までの経緯

工業高校に入学して部活で先輩がウェブを勉強していると知り、そこからウェブ開発に興味を持ちました。部活の先生から技能五輪全国大会ウェブデザイン職種を勧められ高校3年の時に初出場しました。初出場で銀賞を受賞してこの道をさらに勉強したいと思うようになりました。高校卒業後さらに高度な教育が得られる専攻科という道に進学し、指導者の学校の先生と共に金賞という目標を立て頑張りました。専攻科1, 2年では2年連続で金賞を受賞し、2年生の時の大会で金賞を受賞したことによりWorldSkillsへ出場が決定しました。その後クラスメソッドへ新卒で入社して会社と大会を両立して頑張っているところです。

入社ジョインブログとインターンジョインブログには技能五輪のこと以外にも経歴が書いてあるのでよかったら見てください！

大会に出場する意味

WorldSkillsで得られる経験は、技術者の中でもほとんどの人が経験できないものです。そんな特別な経験をして成長することは、自分のユニークさに繋がるはずです。

具体的に技術以外で得られるものは以下のものがあります。

国の代表として選ばれて戦うための責任感
代表に選ばれてから大会までの10ヶ月間努力をする忍耐力と精神力
世界の技術者と自分の差の理解
大会当日の緊張感や重圧
今までの練習や成果を発揮する力
世界の同じ技術を極めた技術者と触れ合える

これらを経験または感じることは中々ないのでこの大会に出場したいと思いました。

競技の課題について

WorldSkillsでは全競技4日間の競技時間があります。WebTechnologiesでは4日間で7つの課題を行います。

課題の公表は競技開始日から3日前で、大会当日までに対策ができます。

競技ということで主に以下の条件があります。

全ての課題で3時間のタイムリミット
インターネットへのアクセスができない
使用できるライブラリ・フレームワークの種類が限られる
VSCodeの拡張機能の種類が限られる (ほとんど種類がない)

この条件の中でどれほど自分の力を発揮できるかが鍵になってきます。

WorldSkillsの課題に興味がある方は、「https://worldskills.org/」でアカウントを作成してログインをすることで過去の課題（英語）をダウンロードして、確認することができます。

各課題の説明

今回説明するのはWorldSkills2022SE WebTechnologiesの問題を基準にしています。（一部省略しています）

問題をわかりやすくするために技能五輪全国大会ウェブデザイン職種の問題も参考にしました。

大会ではどんなものが出題されるか分からないため前回までを参考に幅広く対策する必要があります。

スピードテスト (SpeedTest)

ライブラリやフレームワークを使わず、HTML, CSS, JS, PHPを使用して15問の問題を素早く解決する課題です。

例えば、キーボードハイライターを作成する課題ではJSのみを用いて課題に沿って作成します。

部分点などはなく、完成できているかの○×採点です。

知っていないと解けないため幅広く言語の基礎理解が必要です。

バックエンド (Backend) ~PHPフレームワークとMySQLデータベースによるAPIと静的ページの構築~

Laravelを使用してゲームを配信するプラットフォームのバックエンド基盤を作成します。

データベース設計、管理者がアクセスする管理画面、次のフロントエンド課題に使用するRESTful APIなどを作成します。

管理画面ではSSRで管理者がログインをしてユーザーとゲームの管理ができます。

RESTful APIではフロントエンド課題で使用するための認証、ユーザー管理、ゲーム管理をします。

仕様書を満たした動作ができているかの採点がされます。

フロントエンド (Frontend) ~JSフレームワークを用いたフロントエンド部分の構築~

Reactを使用してユーザーがアクセスための以下のようなゲームプラットフォームの画面を作成します。（CSSにはBootstrapを使用）

ゲーム開発者ポータル。ゲーム開発者がプラットフォームへゲームをアップロードするためのWebアプリケーション。
管理者ポータル。管理者がユーザーやゲームを含むプラットフォームを管理するためのWebアプリケーション。
ゲーミングポータル。プレイヤーがブラウザ上でオンラインゲームをプレイするためのWebアプリケーション。

ログイン機能、APIでのデータ取得と登録、データの表示、ゲームの実行などの機能を追加します。

仕様書通りの機能、しっかりとコンポーネント設計ができているか、アクセシビリティの観点などの採点があります。

インタラクティブ (Interactive) ~JS用いたゲーム作成~

バックエンド、フロントエンドで作成したプラットフォームにアップロードするゲームを作成します。

以下の機能がある横スクロールアクションのゲームを作成します。

キーボードやマウス操作によるプレイヤーの移動
LocalStrageでのプレイヤーの位置保存
バリアに当たるとクイズが表示
クイズに正解すると次のステージに進める
APIを使用したスコア保存
プレイヤーのアクションに合わせたサウンドの追加

仕様書を満たした動作ができているかの採点がされます。

マーケティングページ (Marketing Page) ~HTML, CSSでのWebサイト作成~

HTML, CSS (Bootstrap)でゲームプラットフォームを宣伝するためのマーケティングページを設計・作成します。

画像やテキストが配布され仕様書のコンセプトや入れたい内容などを参考にサイトデザインを考えコーディングをします。

レスポンシブにも対応する必要があるため、デザインとコーディングのスピードがかなり重要となります。

デザインではより大きく表現をしたりアニメーションを追加してプロダクトのアピールができているか、また表現が美しいか採点されます。

コーティングにおいては完成度、アクセシビリティ、SEO対策ができているかなどが採点されます。

現時点(5月)で選手になれてよかったと思うこと

1番は技術的なサポートの手厚さです。訓練をしていて困ったことを気軽に聞ける相手がいるのは心強いです。現在は5人ほどサポートしてくださる方がいるので、それぞれの得意分野で常に状況を確認していただいています。

2番に研修です。普段受講しないメンタルやコミュニケーションの研修は特にいい経験でした。選手としてのメンタル状況、エキスパートとのコミュニケーションの方法など講師の方のデータや事例をもとにした説明は非常に面白かったです。

他にも東京に行く機会が増えたことやオンラインで海外の大会に出場できたなど色々あります。

目標

今大会で目指すもの

WorldSkills WebTechnologiesでは過去にメダル獲得がありません。そのため、今回はメダルの獲得を目指して頑張りたいです！

せっかく出場する機会が得られた大会なのでメダルを目指しながら楽しんで経験を得られたらと思います。

これからの仕事にどう活かすか

WorldSkillsで身につくこととして、技術面では分からないことに対応する対応力や短時間でのコーディング力、精神面では国を背負った責任感や訓練を乗り越える精神力があります。実は前回の技能五輪全国大会では大きなトラブルがあり、人生で1番焦った日でもありました。今回の舞台はフランス・リヨンで、国を背負った国際大会です。トラブルもあるかと思いますが、それを乗り越えて自分の経験にすることが現時点で1番自己成長に繋がるものだと思います。ここで成長した技術・精神力を活かしてエンジニアとしてだけでなく、トラブルなどへの安定感を持ち、周りに影響を与え頼られる存在になれるように頑張っていきたいです。

より技能五輪で活躍するためのアドバイス

全国の参加者(学生・企業)に対して

今回出場するWorldSkillsは技術を競う大会として世界最大規模のものになります。特にウェブデザイン職種は学生が活躍しやすく大大チャンスな大会です！WorldSkillsや技能五輪全国大会で入賞すると国や県から表彰を頂けます。確実に就職などに役立つし、今まで説明したようにこれまでしたことのない経験が待っています。ぜひこのような大会に力を入れて挑戦してみて自分の力を見せつけてみてください！！

全国の指導者に対して

技能五輪での指導者を任せられた方がいたらできる限り選手に寄り添って対応してくださることが選手にとって1番の励みになります。僕は学校の先生が指導者として技能五輪に挑戦してきました。僕の場合はほとんど独学で、先生はマネジメントなどのサポートをして頂きました。1番選手の理解をして頼られる存在が指導者です。選手の状態、技能の理解などを質問してくれて話すだけで選手としては気が楽になる、理解が増す、新たな気づきを発見するなどプラスになることが多いように感じました。実際に先生いなかったらWorldSkillsに出場はできなかったと思います。選手がより良い結果と経験を得られるためにご協力お願いいたします。